<template>
    <yh-dialog
        :visible.sync="visibleTemp"
        v-bind="$attrs"
        :title="dialogTitle"
        :modal="false"
        :close-on-click-modal="false"
        drag
        zoomable
        width="750px"
        @close="handleCloseDialog"
    >
        <div class="dialog-main">
            <el-form label-width="150px">
                <div>
                    <el-form-item label="比较器名称:" required>
                        <el-input v-model="submitForm.compareName" :disabled="isLook" clearable size="mini"></el-input>
                    </el-form-item>
                </div>
                <!-- <div>
                    <el-form-item label="处理类型:" required>
                        <el-select v-model="submitForm.processType" @change="handleProcessType" :disabled="isLook" size="mini">
                            <el-option v-for="u in processTypeStorage" :key="u.dictKey" :value="u.dictKey" :label="u.dictKeyName"></el-option>
                        </el-select>
                    </el-form-item>
                </div> -->
                <!-- tableColMergeProcessor -->
                <div class="title-with-box">
                    <el-divider content-position="left">比较规则</el-divider>
                    <el-form label-width="150px">
                        <el-row>
                            <el-form-item label="数据检查规则:" required>
                                <template slot="label">
                                    <span>
                                        <el-tooltip>
                                            <div slot="content" style="white-space: pre">{{ questionTip1 }}</div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                        数据检查规则:
                                    </span>
                                </template>
                                <el-input
                                    v-model="submitForm.checkRuleContext"
                                    :disabled="isLook"
                                    id="put"
                                    :autosize="{ minRows: 8 }"
                                    type="textarea"
                                    size="mini"
                                    style="width: calc(100% - 95px)"
                                ></el-input>
                                <el-button
                                    size="mini"
                                    icon="el-icon-copy-document"
                                    style="padding: 69px 15px; margin-left: 4px; vertical-align: top"
                                    @click="copyText"
                                >
                                    复制
                                </el-button>
                            </el-form-item>
                        </el-row>
                        <!-- <el-row style="display: flex">
                            <el-form-item label="单染红的列索引:" required>
                                <el-row class="frequency-box" style="margin-top: 6px; height: 28px">
                                    <el-col :span="2">
                                        <i class="el-icon-plus" @click="addIndex"></i>
                                    </el-col>
                                </el-row>

                                <el-row v-for="(i, index) in indexArr" :key="index" class="frequency-box">
                                    <el-col :span="2" style="line-height: 40px">
                                        <i class="el-icon-minus" @click="deleteIndex(index)"></i>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-input v-model="i.dictKey" :disabled="isLook" clearable size="mini"></el-input>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </el-row> -->
                    </el-form>
                </div>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" v-show="type !== 'look'" @click="handleReset"> 重 置 </el-button>
            <el-button size="mini" @click="handleCloseDialog"> 取 消 </el-button>
            <el-button size="mini" v-show="type !== 'look'" :loading="loading" type="primary" @click="handleSave"> 确 认 </el-button>
        </div>
    </yh-dialog>
</template>
<script lang="ts">
import { Component, Prop, PropSync, Vue, Watch } from 'vue-property-decorator';
import { ComparatorVO } from '../vo/monitor-rule-setting';

@Component({ name: 'ComparatorDialog', components: {} })
export default class ComparatorDialog extends Vue {
    @PropSync('visible') syncVisible: boolean;
    @Prop() detail: any;
    @Prop() type: string; // add | look

    public visibleTemp: boolean = false;

    submitForm: ComparatorVO = {
        compareName: '',
        checkRuleContext: '',
        flagColumnList: [],
        flagColumn: '',
    };

    loading: boolean = false;

    indexArr: any[] = [{ dictKey: '', dictKeyName: '' }]; // 列选择

    questionTip1: string =
        '通过数据汇总结果，进行数据列与列之间的数据比较，通过表达式配置，表达式成立为比较结果一致，不通过则为异常\n例子：RISK_C_STOCK_CODE=HS_C_STOCK_CODE && RISK_C_STOCK_TYPE=HS_C_STOCK_TYPE\n运算符：并且：&&、或者：||、大于：>、小于：<、不等于：!=、等于：=';

    created() {}

    mounted() {
        if (['look', 'edit'].includes(this.type)) {
            this.submitForm = JSON.parse(JSON.stringify(this.detail));
            // 将 flagColumnList 转换成UI组件可用格式
            this.submitForm.flagColumnList = JSON.parse(this.submitForm.flagColumn);
            let indexArr = [];
            this.submitForm.flagColumnList.forEach(element => {
                indexArr.push({ dictKey: element, dictKeyName: element });
            });
            this.indexArr = indexArr;
        }
    }

    @Watch('visible', { immediate: true, deep: true })
    onWatchVisible(value) {
        if (value !== this.visibleTemp) {
            this.visibleTemp = value;
        }
    }

    get dialogTitle() {
        const enumT = { add: '新增', look: '查看', edit: '编辑' };
        return `${enumT[this.type]}比较器`;
    }

    get isLook() {
        return this.type === 'look';
    }

    // @Watch('detail', { immediate: true })
    // watchdetail(newData) {
    //     if (newData) {
    //         this.submitForm = data;
    //     }
    // }

    /**
     * 新增索引
     */
    addIndex(): void {
        if (this.isLook) return;
        this.indexArr.push({ dictKey: '', dictKeyName: '' });
    }

    /**
     * 删除索引
     * @param index 所处下标
     */
    deleteIndex(index: number): void {
        if (this.isLook) return;
        if (this.indexArr.length === 1) {
            this.yh_message_warn('索引最少设置1条!');
            return;
        }
        this.indexArr = this.indexArr.filter((i, index1) => index1 !== index);
    }

    /**
     * 保存事件
     */
    handleSave(): void {
        if (!this.verify()) return;
        this.loading = true;

        this.submitForm.flagColumnList = this.indexArr.map(i => i.dictKey);
        this.submitForm.flagColumn = JSON.stringify(this.submitForm.flagColumnList);
        console.log(this.submitForm, 'this.submitForm');
        this.$emit('submit', this.submitForm);
    }

    verify() {
        if (!this.submitForm.compareName) {
            this.yh_message_warn('比较器名称不能为空!');
            return false;
        }
        if (!this.submitForm.checkRuleContext.trim()) {
            this.yh_message_warn('数据检查规则不能为空!');
            return false;
        }
        // if (!this.submitForm.logicContext.trim()) {
        //     this.yh_message_warn('logicContext!');
        //     return false;
        // }
        // if (!this.submitForm.logicParam.length) {
        //     this.yh_message_warn('监控点信息不能为空!');
        //     return false;
        // }
        // if (JSON.stringify(this.submitForm) === JSON.stringify(this.detail)) {
        //     this.yh_message_warn('数据源无修改!');
        //     return false;
        // }
        return true;
    }

    handleReset(): void {
        this.submitForm.compareName = '';
        this.submitForm.checkRuleContext = '';
        this.submitForm.flagColumnList = [];
        this.submitForm.flagColumn = '';
        this.indexArr = [{ dictKey: '', dictKeyName: '' }]; // 列选择
    }

    copyText() {
        const d = document.getElementById('put') as any; // 获取需要复制的元素
        d.select(); // 选中
        document.execCommand('copy'); // 直接复制
        this.yh_message_success('复制成功!');
    }

    /**
     * 关闭dialog事件
     */
    handleCloseDialog(): void {
        this.syncVisible = false;
    }
}
</script>
<style lang="scss" scoped>
.title-with-box {
    border: 1px solid #dcdfe6;
    border-top: none;

    // /deep/ .el-divider--horizontal {
    //     height: 2px;
    // }

    /deep/ .el-divider__text {
        padding: 0 15px;
        font-weight: 600;
        font-size: 15px;
    }

    .frequency-box {
        // margin-bottom: 10px;

        /deep/ .el-col-2 {
            text-align: right;
            padding-right: 20px;
            line-height: 28px;

            .el-icon-plus,
            .el-icon-minus {
                font-size: 17px;
                font-weight: 600;
                cursor: pointer;
            }
        }
    }

    .logic-box {
        display: flex;
        padding: 0 10px;

        .flex1 {
            flex: 1;

            /deep/ .el-button {
                padding: 4px 10px;
                border-radius: 7px;
                .el-icon-plus {
                    font-weight: 600;
                }
            }
        }

        /deep/ .el-card__body {
            padding: 10px;
        }
        p {
            padding-left: 5px;
            margin-bottom: 10px;
        }

        li {
            position: relative;
            border: 1px solid #dcdfe6;
            margin-bottom: -1px;
            border-radius: 4px;
            // height: 30px;
            // line-height: 30px;
            padding: 4px 10px;

            .btn {
                position: absolute;
                right: 0;
                top: 4px;
            }
            .title,
            .link {
                color: #0000ffd7;
            }

            .link {
                cursor: pointer;
                margin-right: 15px;
            }
        }
    }
    .red {
        color: red !important;
    }
}
/deep/ .el-form-item {
    padding: 0 5px;
    margin-bottom: 10px;
}

/deep/ .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    content: '*' !important;
    color: red !important;
    margin-right: 4px !important;
}

/deep/ .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after {
    content: '' !important;
}
</style>
